<template>
  <view class="recycle-container">
    <!-- 页面头部 -->
    <van-nav-bar
      title="电动车回收"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      custom-class="custom-nav-bar"
      custom-style="position: fixed; top: 0; left: 0; right: 0; z-index: 100;"
    />

    <!-- 表单信息 -->
    <view class="section">
      <view class="section-title">基本信息</view>
        <van-form @submit="submitRecycle" custom-class="custom-form">
        <view class="input-group">
            <van-field
              v-model="addressInfo.name"
              label="姓名"
              placeholder="请输入姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            custom-style="background-color: #f5f5f5; border-radius: 8px; padding: 8px 12px; transition: all 0.3s ease; &:hover { background-color: #e8e8e8; } &:focus-within { background-color: #fff; box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.2); }"
            />
          <van-field
            v-model="addressInfo.phone"
            label="电话"
            placeholder="请输入电话"
            type="tel"
            :rules="[{ required: true, message: '请填写电话' }]"
            custom-style="background-color: #f5f5f5; border-radius: 8px; padding: 8px 12px; transition: all 0.3s ease; &:hover { background-color: #e8e8e8; } &:focus-within { background-color: #fff; box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.2); }"
          />
          <van-field
            v-model="addressInfo.detail"
            label="详细地址"
            placeholder="请输入详细地址"
            :rules="[{ required: true, message: '请填写详细地址' }]"
            custom-style="background-color: #f5f5f5; border-radius: 8px; padding: 8px 12px; transition: all 0.3s ease; &:hover { background-color: #e8e8e8; } &:focus-within { background-color: #fff; box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.2); }"
          />
          <van-field
            v-model="selectedTime"
            is-link
            readonly
            label="取件时间"
            placeholder="请选择取件时间"
            @click="showTimePicker = true"
            custom-class="custom-field"
          />
        </view>

        <!-- 电动车规格 -->
        <view class="section">
          <view class="section-title">电动车规格</view>
          <view class="input-group">
            <van-field label="品牌" readonly custom-class="custom-field">
              <template #input>
            <van-radio-group v-model="selectedSpec.brand" direction="horizontal" custom-class="custom-radio-group" custom-style="display: flex; flex-wrap: wrap; gap: 8px;">
                  <van-radio v-for="brand in brands" :key="brand" :name="brand">
                    {{ brand }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>

            <van-field label="电池类型" readonly custom-class="custom-field">
              <template #input>
                <van-radio-group v-model="selectedSpec.battery" direction="horizontal" custom-class="custom-radio-group" custom-style="display: flex; flex-wrap: wrap; gap: 8px;">
                  <van-radio v-for="battery in batteries" :key="battery" :name="battery">
                    {{ battery }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>

            <van-field label="电压" readonly custom-class="custom-field">
              <template #input>
                <van-radio-group v-model="selectedSpec.voltage" direction="horizontal" custom-class="custom-radio-group" custom-style="display: flex; flex-wrap: wrap; gap: 8px;">
                  <van-radio v-for="voltage in voltages" :key="voltage" :name="voltage">
                    {{ voltage }}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </view>
        </view>

        <!-- 预估价格 -->
        <view class="section">
          <view class="section-title">预估价格</view>
          <view class="input-group">
            <van-field
              v-model="estimatedPrice"
              label="预估价格"
              readonly
              :placeholder="selectedSpec.brand ? `预估价格：${estimatedPrice}元` : '请先选择规格'"
              custom-class="custom-field"
            />
          </view>
        </view>

        <!-- 时间选择器 -->
        <van-popup v-model:show="showTimePicker" position="bottom" custom-class="custom-popup" custom-style="background-color: #fff; border-radius: 16px 16px 0 0;">
            <van-picker
              :columns="timeOptions"
              @confirm="onTimeConfirm"
              @cancel="showTimePicker = false"
              custom-class="custom-picker"
            />
        </van-popup>

        <!-- 提交按钮 -->
        <view class="action-bar">
          <van-button class="btn" round block type="primary" native-type="submit" custom-class="custom-button" custom-style="width: 90%; margin: 0 auto; background-color: #07c160; border: none;">
            确认提交
          </van-button>
        </view>
      </van-form>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
// 在uni-app中使用vant-weapp需要全局注册
// 在main.js中已经全局注册了vant组件

// 时间选项
const timeOptions = ref([
  { text: '09:00-12:00', value: '09:00-12:00' },
  { text: '13:00-15:00', value: '13:00-15:00' },
  { text: '16:00-18:00', value: '16:00-18:00' }
])
const selectedTime = ref('')
const showTimePicker = ref(false)

// 地址信息
const addressInfo = ref({
  name: '',
  phone: '',
  detail: ''
})

// 规格选项
const brands = ref(['雅迪', '爱玛', '新日'])
const batteries = ref(['铅酸电池', '锂电池'])
const voltages = ref(['48V', '60V', '72V'])

// 选择的规格
const selectedSpec = ref({
  brand: brands.value[0], // 默认选择第一个品牌
  battery: batteries.value[0], // 默认选择第一个电池类型
  voltage: voltages.value[0] // 默认选择第一个电压
})

// 预估价格
const estimatedPrice = computed(() => {
  if (!selectedSpec.value.brand) return '请先选择规格'

  // 根据选择的规格计算价格
  const basePrice = 100
  const brandFactor = brands.value.indexOf(selectedSpec.value.brand) + 1
  const batteryFactor = batteries.value.indexOf(selectedSpec.value.battery) + 1
  const voltageFactor = voltages.value.indexOf(selectedSpec.value.voltage) + 1

  return basePrice + (brandFactor * 20) + (batteryFactor * 15) + (voltageFactor * 10)
})

// 时间选择确认
const onTimeConfirm = ({ selectedOptions }) => {
  selectedTime.value = selectedOptions[0]?.value
  showTimePicker.value = false
}

// 返回
const goBack = () => {
  uni.navigateBack()
}

// 提交回收
const submitRecycle = () => {
  if (!addressInfo.value.name || !addressInfo.value.phone || !addressInfo.value.detail || !selectedTime.value) {
    showToast({
      message: '请填写完整信息',
      icon: 'fail'
    })
    return
  }

  const loading = showLoadingToast({
    message: '提交中...',
    forbidClick: true
  })

  // 模拟提交
  setTimeout(() => {
    loading.close()
    showToast({
      message: '提交成功',
      icon: 'success'
    })
  }, 1000)
}
</script>

<style lang="scss" scoped>
@use './recycle.scss';

.recycle-container {
  padding: 16px;
}

.spec-group {
  margin-top: 16px;

  .van-field__label {
    width: 80px;
  }

  .van-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .van-radio {
    margin-right: 12px;
  }
}
</style>
